<template>
    <div class="songc_list">
      <!-- 导航栏 -->
      <van-nav-bar
        title="歌单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
  <!-- 歌曲首部 -->
      <div class="header">
        <img :src="song.logo" radius="10" alt="" />
        <h3>{{ song.dissname }}</h3>
        <div class="nick">
          <img :src="song.headurl" alt="" />
          <span>{{ song.nickname }}</span>
        </div>
        <span>{{ song.visitnum | numFilter(1) }}万</span>
      </div>
      <!-- 歌曲列表 -->
      <div class="list">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">
  
        <div v-for="(item,index) in list" :key="index" :title="item" class="song">
        <h3>{{item.songname}}</h3> 
        <div class="singers">
          <span v-for="(singer,index) in item.singer" :key="singer.id">
          {{singer.name}}
          <span v-show="index!=item.singer.length-1">/</span>
          </span>
          <span v-show="item.albumname">
          <span>.</span>
          <span>{{item.albumname}}</span>
          </span>
        </div>
        </div>
      </van-list>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        song: {
          dissname: "", //歌单标题
          logo: "", //标题
          headurl: "", //歌手头像
          nickname: "", //歌单制作者名称
          visitnum: 0, //歌单播放量
        },
        songlist:[],//歌曲列表
        songnum:0,//歌曲列表数目
        list:[],//vant的list列表数据
        loading: false,
        finished: false,
      };
    },
    created() {
      this.getListData();
    },
    methods: {
      getListData() {
        this.$request("get", "/songlist", {
          id: this.$route.params.id,
        }).then((res) => {
          console.log(res);
          this.song.logo = res.data.logo;
          this.song.dissname = res.data.dissname;
          this.song.headurl = res.data.headurl;
          this.song.nickname = res.data.nickname;
          this.song.visitnum = res.data.visitnum;
          this.songlist = res.data.songlist;//获取歌曲列表信息
          this.songnum = res.data.songnum;//获取歌曲数目
        });
      },
      onClickLeft() {
        //如果历史记录大于1，那么返回上一层，如果历史记录小于等于1，返回根路由
        window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
      },
      onLoad(){
        setTimeout(()=>{
          //注意splice和slice方法差异
          this.list = this.list.concat(this.songlist.splice(0,10))
          //console.log(this.list);
  
          //加载状态结束
          this.loading = false;
  
          //数据全部加载完成
          if(this.list.length >= this.songnum){
            this.finished = true;
          }
        },1000)
      }
    },
  };
  </script>
  
  <style scoped>
  .header > img {
    width: 50%;
    border-radius: 1rem;
  }
  .nick > img {
    width: 1rem;
    border-radius: 50%;
    margin-right: 0.5rem;
  }
  .nick > span {
    height: 2rem;
    display: inline-block;
    vertical-align: middle;
    font-size: 00.8rem;
  }
  .header > span {
    font-size: 0.9rem;
  }
  .song{
    margin-bottom: 1rem;
  }
  .song>h3{
    text-align: left;
    padding: 0 2rem;
    color: rgba(0, 0, 0, 0.856);
  }
  
  .singers{
    text-align: left;
    padding: 0 2rem;
  }
  .singers span{
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.303);
  }
  .singers>span:nth-last-child(1)>span:nth-child(1){
    margin: 0 0.3rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.56);
  }
  </style>
  